<template>
  <div>
    <h1>这是我的根组件</h1>
    <!-- 默认插槽 -->
    <Card>
      <template>
        <h2>爱好之一是台球</h2>
      </template>
    </Card>
    <Card>
      <template>
        <h2>爱好之一是奔驰</h2>
      </template>
    </Card>
    <Card>
      <template>
        <h2>爱好之一是手表</h2>
      </template>
    </Card>
    <!-- 具名插槽 -->
    <Card2>
      <template slot="cuijian">
        <h2>爱好之一是台球</h2>
      </template>
      <template slot="cuijian2">
        <h2>爱好之一是奔驰</h2>
      </template>
      <template #cuijian3>
        <h2>爱好之一是手表</h2>
      </template>
    </Card2>
  </div>
</template>

<script>
import Card from "./components/Card.vue";
import Card2 from "./components/Card2.vue";
export default {
  name: "nihao",
  components: { Card, Card2 },
};
</script>

<style scoped>
h2 {
  color: red;
}
</style>
